<template>
  <div>
    <div class="margin-container-list">
      <!--顶部搜索 -->
      <div class="top-operate">
        <div>
          <div class="float-l">
            <el-select class="select-class" v-model="textCol" style="width: 120px">
              <el-option label="商品名称" value="title"></el-option>
              <el-option label="商品货号" value="goodsCode"></el-option>
              <el-option label="商品条码" value="goodsBarCode"></el-option>
              <el-option label="外部编码" value="externalCode"></el-option>
            </el-select>
            <el-input @keyup.enter.native="handleSearch" v-model="searchKeyword" placeholder="请输入关键词" style="width: 300px"></el-input>
            <el-cascader v-model="categoryIds"  placeholder="选择商品分类" :options="categoryData" :props="{ checkStrictly: true }" change-on-select  class="default-input" filterable></el-cascader>
            <el-button type="primary" plain @click="handleSearch">查询</el-button>
            <el-button type="primary" plain @click="handleBatchSelect">添加子商品</el-button>
          </div>
          <br>
        </div>
      </div>

      <!-- 内容列表 -->
      <div class="table-container">
        <el-table  ref="multipleTable" :data="goodsList" @selection-change="handleSelectionChange" v-loading="listLoading" element-loading-text="加载中" style="width: 100%" >
          <el-table-column width="50px" type="selection" fixed="left"></el-table-column>
          <el-table-column min-width="250px" label="商品" prop="title">
            <template slot-scope="scope">
              <div @click="handleEdit(scope.row)" class="flex v-align-c cursor-p">
                <label><img :src="scope.row.mainImage" class="user-avatar"></label>
                <div class="font-14 pad-l-10">
                  <div>{{scope.row.title}}</div>
                  <template v-if="scope.row.goodsBarCode">
                    <div class="category-style">条码: {{scope.row.goodsBarCode}}</div>
                  </template>
                  <template v-if="scope.row.categoryName">
                    <div class="category-style">[{{scope.row.categoryName}}]</div>
                  </template>
                </div>
              </div>
            </template>>
          </el-table-column>
          <el-table-column width="300px" label="规格描述" prop="skuDetail">
            <template slot-scope="scope">
              <template>
                {{ scope.row.skuDetail ? scope.row.skuDetail : '单规格' }}
              </template>
            </template>
          </el-table-column>
          <el-table-column width="100px" label="可用库存" prop="stock">
            <template slot-scope="scope">
                {{ scope.row.stock ? scope.row.stock : 0 }}
              </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="searchListQuery.currentPage"
                       :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .user-avatar{
    width: 68px;
    height: 68px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }
  .category-style{
    color: #3abbdb
  }
</style>

<script>
  import { listGoodsCategory } from '@/api/goods/goods'
  import elDragDialog from '@/directive/el-dragDialog'
  import { listGoodsForSelect } from '@/api/goods/goods-combo'

  export default {
    components: {},
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      // details1: {
      //   type: Object,
      //   default: null
      // },
      eventId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        total: null,
        listLoading: true,
        goodsSortNo: null,
        searchListQuery: {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10,
          title: '',
          goodsStatus: '1'
        },
        searchKeyword: '',
        isDict: false,
        categoryIds: [],
        goodsList: [],
        // 商品的所有分类json
        categoryData: [],
        goodsDetails: {
          componentGoodsId: '',
          detailsId: '',
          goodsId: '',
          goodsSortNo: 0,
          imgUrl: '',
          title: '',
          price: '',
          stock: ''
        },
        textCol: 'title',
        // 勾选商品
        pageSelection: [],
        subGoosList: []
      }
    },
    // 初始化页面
    created() {
      this.listGoodsCategory()
      this.initGoodsList()
    },
    filters: {
      priceFilter(e) {
        return e.toFixed(2)
      }
    },
    mounted() {
      const that = this
      this.$bus.$on('selectComponentGoods' + this.eventId, function(goodsSortNo) {
        that.goodsSortNo = goodsSortNo
      })
    },
    methods: {
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initGoodsList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initGoodsList()
      },
      // 勾选
      handleSelectionChange(items) {
        if (items.length === 0) {
          this.pageSelection[this.searchListQuery.currentPage] = []
        } else {
          this.pageSelection[this.searchListQuery.currentPage] = items
        }
      },
      // 页面分页搜索
      initGoodsList() {
        this.searchListQuery['textCol'] = this.textCol
        this.searchListQuery['searchKeyword'] = this.searchKeyword
        this.searchListQuery['oneCategoryId'] = ''
        this.searchListQuery['twoCategoryId'] = ''
        this.searchListQuery['threeCategoryId'] = ''
        const categoryIds = this.categoryIds
        if (categoryIds.length === 1) {
          this.searchListQuery['oneCategoryId'] = categoryIds[0]
        }
        if (categoryIds.length === 2) {
          this.searchListQuery['twoCategoryId'] = categoryIds[1]
        }
        if (categoryIds.length === 3) {
          this.searchListQuery['threeCategoryId'] = categoryIds[2]
        }
        this.listLoading = true
        // 搜索子商品
        listGoodsForSelect(this.searchListQuery).then(response => {
          this.total = response.data.total
          this.goodsList = response.data.records
          if (!this.isDict) {
            this.isDict = true
          }
          this.listLoading = false
        })
      },
      // 获取类目
      listGoodsCategory() {
        const enterpriseId = this.getEnterpriseId()
        listGoodsCategory(enterpriseId).then(response => {
          this.categoryData = response.data
        })
      },
      handleSearch() {
        this.initGoodsList()
      },
      // 批量选择商品
      handleBatchSelect() {
        if (this.pageSelection[this.searchListQuery.currentPage].length === 0) {
          this.$message({ message: '请勾选商品', type: 'warning' })
          return
        }
        this.pageSelection.forEach(select => {
          select.forEach(sub => {
            this.subGoosList.push(sub)
          })
        })
        const res = new Map()
        this.$bus.$emit('goodsCombo.subGoodsList', this.subGoosList.filter((arr) => !res.has(arr.goodsCode + '-' + arr.skuId) && res.set(arr.goodsCode + '-' + arr.skuId, 1)))
        this.$message({ message: '商品添加成功', type: 'success' })
        // 清空当前的选择
        this.pageSelection[this.searchListQuery.currentPage] = []
        this.subGoosList = []
        this.$refs.multipleTable.clearSelection()
      }
    }
  }

</script>
